$(function () {
    var ul = $(".Q1ul");
    var list = ul.children();
    list.mouseenter(function () {
        var index = $(this).index();
        hightlight(index);
    });
    ul.mouseleave(() => hightlight(-1));
    function hightlight(index) {
        list.each((i, e) => {
            if (i <= index) {
                $(e).text('★');
            } else {
                $(e).text('☆');
            }
        });
    }
})


$(function () {
    const number1 = $('#number1');
    const number2 = $('#number2');
    const operator = $('#operator');
    const result = $('#result');
    $('#Q2submit').click(function () {
        var str = number1.val()+operator.val()+number2.val();
        result.val(eval(str));
    });
})

$(function () {
    let submit = $("#submit");
    let messgaeBox = $("#messageBox");
    submit.click(function () {
        let username = $("#username").val();
        let content = $("#textContent").val();
        let anm = $("#anonymous").prop("checked");
        if (username === '' || content === '')
        {
            alert("用户名或者内容不能为空");
            return
        }
        if(anm)
            username = "路人甲";
        Send(username,content);
    })
    function Send(username,content){
        const time = new Date().toLocaleTimeString();
        let chatcontent =$('<div><p></p><span></span></div>');
        chatcontent.children().eq(0).text(username + "  " + time)
        chatcontent.children().eq(1).text(content)
        messgaeBox.append(chatcontent);
    }
})

$(function () {
    var $Q4btn = $(".Q4btn")
    var $lis = $(".Q4carousel ul li")

    // 信号量编程
    var sem = 0

    // 防止用户连续快速多次点击，导致点击事件多次执行
    // 函数节流、函数防抖
    // 给事件函数添加一把锁,最开始默认打开
    var lock = false
        // 添加点击事件
    $Q4btn.click(function() {
        // 先判断锁是否是锁住的
        if (lock) return
            // 一旦动画开始，就锁住
        lock = true
            // 每次点击，让 li 标签旋转,沿着 x 轴逆时针旋转 90 度
        sem -= 90;
        // 改变每个 li 标签的角度
        $lis.css({
            "transform": "rotateX(" + sem + "deg)"
        })

        // 计算总体的运动时间，在这个时间之后，打开锁
        var time = (1 + 0.1 * ($lis.length - 1)) * 1000
        setTimeout(function() {
            lock = false
        }, time)
    })
})

$(function () {
    var $Q5btn = $(".Q5btn")
        var $lis = $(".Q5carousel ul li")

        // 信号量编程
        var sem = 0

        // 防止用户连续快速多次点击，导致点击事件多次执行
        // 函数节流、函数防抖
        // 给事件函数添加一把锁,最开始默认打开
        var lock = false
            // 添加点击事件
        $Q5btn.click(function() {
            // 先判断锁是否是锁住的
            if (lock) return
                // 一旦动画开始，就锁住
            lock = true
                // 每次点击，让 li 标签旋转,沿着 x 轴逆时针旋转 90 度
            sem -= 90;
            // 改变每个 li 标签的角度
            $lis.css({
                "transform": "rotateX(" + sem + "deg)"
            })

            // 计算总体的运动时间，在这个时间之后，打开锁
            var time = (1 + 0.1 * ($lis.length - 1)) * 1000
            setTimeout(function() {
                lock = false
            }, time)
        })
})